{% extends 'base.html' %}
{% load static %}

{% block title %}
    {{ blog.title }}
{% endblock %}

{% block content %}
    <!-- section main content -->
    <section class="main-content mt-3">
        <div class="container-xl">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">首页</a></li>
                    <li class="breadcrumb-item">{{ blog.category }}</li>
                    <li class="breadcrumb-item active" aria-current="page">{{ blog.title }}</li>
                </ol>
            </nav>
            <div class="row gy-4">
                <div class="col-lg-8"><!-- post single -->
                    <div class="post post-single"><!-- post header -->
                        <div class="post-header">
                            <h1 class="title mt-0 mb-3">{{ blog.title }}</h1>
                            <ul class="meta list-inline mb-0">
                                <li class="list-inline-item">
                                    <a href="/user/author/{{ blog.user.id }}/">
                                        <img src="/media/{{ blog.user.user_head }}" class="author circular-image"
                                             alt="author"/>
                                        {{ blog.user.name }}
                                    </a>
                                </li>
                                <li class="list-inline-item">热门</li>
                                <li class="list-inline-item">views:{{ view_nums }}</li>
                                <li class="list-inline-item">{{ blog.create_time }}</li>
                            </ul>
                        </div>
                        <!-- featured image -->
                        <div class="featured-image">
                            <img src="{{ blog.fm_image }}" alt="post-title" class="blog-detail-cover"/>
                        </div>
                        <!-- post content -->
                        <div class="post-content clearfix">
                            {{ blog.body | safe }}
                        </div>
                        <!-- post bottom section -->
                        <div class="post-bottom">
                            <div class="row d-flex align-items-center">
                                <div class="col-md-6 col-12 text-center text-md-start"><!-- tags -->
                                    <a href="#" class="tag">#热门</a>
                                    <a href="#" class="tag">#视频</a>
                                    <a href="#" class="tag">#精选</a>
                                </div>
                                <div class="col-md-6 col-12"><!-- social icons -->
                                    <ul class="social-icons list-unstyled list-inline mb-0 float-md-end">
                                        <li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a>
                                        </li>
                                        <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
                                        <li class="list-inline-item"><a href="#"><i class="fab fa-linkedin-in"></i></a>
                                        </li>
                                        <li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a>
                                        </li>
                                        <li class="list-inline-item"><a href="#"><i
                                                class="fab fa-telegram-plane"></i></a></li>
                                        <li class="list-inline-item"><a href="#"><i class="far fa-envelope"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="spacer" data-height="50"></div>
                    <div class="spacer" data-height="50"></div>
                    <!-- section header -->
                    <div class="section-header">
                        <h3 class="section-title">发表评论</h3>
                        <img src="{% static 'images/wave.svg' %}" class="wave" alt="wave"/>
                    </div>
                    <!-- comment form -->
                    <div class="comment-form rounded bordered padding-30">
                        <form id="comment-form" class="comment-form" method="post" action="/life/comment/">
                            <div class="messages"></div>
                            <div class="row">
                                <div class="column col-md-12"><!-- Comment textarea -->
                                    <div class="form-group">
                                        <textarea name="comment" id="InputComment" class="form-control" rows="4" placeholder="在此输入你的评论..." required="required"></textarea>
                                    </div>
                                    <input type="hidden" name="blog_id" value="{{ blog.id }}">
                                </div>
                            </div>
                            <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-default">
                            <!-- Submit Button -->
                        </form>
                    </div>
                    <div class="spacer" data-height="50"></div>
                    <div class="spacer" data-height="50"></div>
                    <!-- section header -->
                    <div class="section-header">
                        <h3 class="section-title">评论({{ comments|length }})</h3>
                        <img src="{% static 'images/wave.svg' %}" class="wave" alt="wave"/></div>
                    <!-- post comments -->
                    <div class="comments bordered padding-30 rounded">
                        <ul class="comments">
                            <!-- comment item -->
                            {% for comment in comments %}
                            	<li class="comment rounded">
                                <div class="thumb"><img src="/media/{{ comment.user.user_head }}" class="author circular-image" alt="John Doe"/></div>
                                <div class="details">
                                    <h4 class="name"><a href="#">{{ comment.user.name }}</a></h4>
                                    <span class="date">{{ comment.create_time }}</span>
                                    <p>{{ comment.comment }}</p>
{#                                    <a href="#" class="btn btn-default btn-sm">回复</a>#}
                                </div>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="spacer" data-height="50"></div>
                </div>
                <div class="col-lg-4"><!-- sidebar -->
                    <div class="sidebar"><!-- widget about -->
                        <!-- widget tags -->
                        <div class="widget rounded">
                            <div class="widget-header text-center">
                                <h3 class="widget-title">标签云</h3>
                                <img src='{% static "images/wave.svg" %}' class="wave" alt="wave"/></div>
                            <div class="widget-content">
                                {% for tag in tags %}
                                <a href="#" class="tag">#{{ tag.tag_name }}</a>
                                {% endfor %}
                            </div>
                        </div>


                        <!-- widget newsletter -->
                        <div class="widget rounded">
                            <div class="widget-header text-center">
                                <h3 class="widget-title">点赞 / 收藏</h3>
                                <img src='{% static "images/wave.svg" %}' class="wave" alt="wave"/>
                            </div>
                            <div class="widget-content text-center">
                                <div class="d-flex justify-content-center gap-4 mb-2">
                                    <div>
                                        <a class="btn btn-default" id="dz" href="/life/action/{{ blog.id }}/?action=1"><i class="icon-like"></i> 点赞</a>
{#                                        <button class="btn btn-default" id="like-btn" data-blog-id="{{ blog.id }}">点赞 <i class="icon-like"></i></button>#}
                                        <div style="color:#fe5e74;font-weight:bold;font-size:1rem;">{{ thumbsUp }}</div>
                                    </div>
                                    <div>
                                        <a class="btn btn-default" id="sc" href="/life/action/{{ blog.id }}/?action=2"><i class="icon-star"></i> 收藏</a>
                                        <div style="color:#fe5e74;font-weight:bold;font-size:1rem;">{{ collection }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- widget advertisement -->
                        <div class="widget no-container rounded text-md-center"><span
                                class="ads-title">- 广告赞助 -</span><a href="#" class="widget-ads">
                            <img src='{% static "images/ads/ad-360.png" %}' alt="Advertisement"/></a></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block css %}
    <style>
        .circular-image {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #fff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        .blog-detail-cover {
        width: 100%;
        height: 450px; /* 合适的封面图高度 */
        object-fit: cover; /* 按比例裁剪填充容器 */
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    </style>
{% endblock %}

{% block js %}
    <script>
    $(document).ready(function () {
    $('#like-btn').on('click', function () {
        var blogId = $(this).data('blog-id');
        var action = 1; // 点赞动作固定为 1

        $.ajax({
            url: '/life/action/' + blogId + '/',
            type: 'GET',
            data: { action: action },
            success: function (response) {
                if (response.status === 'success') {
                    alert('点赞成功！');
                } else if (response.status === 'already_liked') {
                    alert('你已经点过赞了！');
                }
            },
            error: function () {
                alert('请求失败，请重试。');
            }
        });
    });
});
</script>
{% endblock %}